<html lang='zh-CN'>
        <head >
        <meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title >SG3L</title>
<script src='https://res.gemcoder.com/js/reload.js'></script>
<script src='https://cdn.tailwindcss.com'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<script >tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#165DFF',
        secondary: '#86909C',
        light: '#F2F3F5',
        dark: '#1D2129',
        'primary-light': '#E8F3FF',
        'gray-light': '#F7F8FA',
        'gray-medium': '#C9CDD4'
      },
      fontFamily: {
        inter: ['Inter', 'system-ui', 'sans-serif']
      }
    }
  }
};</script>
<style type='text/tailwindcss'>
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .nav-item-active {
                @apply bg-primary-light text-primary border-l-4 border-primary;
            }
            .chat-bubble-user {
                @apply bg-primary text-white rounded-t-lg rounded-bl-lg rounded-tr-lg;
            }
            .chat-bubble-ai {
                @apply bg-light text-dark rounded-t-lg rounded-br-lg rounded-tl-lg;
            }
        }
    </style>
    </head>
<body class='font-inter bg-white text-dark h-screen flex flex-col overflow-hidden'>
        <!-- 顶部工具栏 -->
<header class='h-16 border-b border-gray-light flex items-center justify-between px-4 md:px-6 bg-white z-10'>
        <div class='flex items-center space-x-4'>
        <div class='flex items-center'>
        <img alt='清言AI' class='w-8 h-8 rounded-md' src='https://design.gemcoder.com/staticResource/echoAiSystemImages/d9d61bf974ec35a51b5b0393e34371c6.png'/>
<span class='ml-2 text-lg font-semibold hidden sm:inline-block' data-yteditvalue='SG3L' style='left:-8px;position:relative'>
        SG3L
    </span>
    </div>
<div class='relative hidden md:block'>
        <input class='w-64 pl-10 pr-4 py-2 rounded-full bg-gray-light focus:outline-none focus:ring-2 focus:ring-primary/30 text-sm' placeholder='搜索历史对话/智能体...' type='text'/>
<i class='fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-secondary'>
        </i>
    </div>
    </div>
<div class='flex items-center space-x-4'>
        <button class='hidden sm:flex items-center text-sm text-secondary hover:text-primary transition-colors'>
        <i class='fas fa-gift mr-1'>
        </i>
<span >
        许愿池
    </span>
    </button>
<button class='hidden sm:flex items-center text-sm text-secondary hover:text-primary transition-colors'>
        <i class='fas fa-download mr-1'>
        </i>
<span >
        下载APP
    </span>
    </button>
<a class='yt-a-defalut-link px-4 py-2 bg-primary text-white rounded-full text-sm hover:bg-primary/90 transition-colors flex' custom-a='true' custom-href='w=1082&h=783&appuuid=1952252503550590976&version=7&pageType=web&uuid=1952259262130421760&appName=原型设计' href='javascript:void(0);' is-add='true' is-page='true' onclick='
          const parseWithURLSearchParams = (queryString) => {
            const params = queryString.split("&")
            const result = {}
            params.forEach(param => {
              const key = param.split("=")[0]
              const value = param.split("=")[1]
              result[key] = value
            })
            return result
          }
          const topWin = window.top
          const originParams = parseWithURLSearchParams(topWin.document.location.href.split("?")[1])
          const href = this.getAttribute("custom-href")
          if (href) {
            if (topWin.location.hash.startsWith("#/edit?")) {
              const { uuid } = parseWithURLSearchParams(href)
              const event = new CustomEvent("changePage", {
                detail: { uuid },
                bubbles: true,
                cancelable: true
              });
              topWin.dispatchEvent(event)
            } else {
              const newParams = parseWithURLSearchParams(href)
              const event = new CustomEvent("previewPageVersion", {
                detail: {
                  appuuid: newParams?.appuuid,
                  pageUuid: newParams?.uuid,
                  callback: (version) => {
                    const params = Object.keys(originParams).reduce((acc, key) => {
                      if (acc !== "?") {
                        acc+="&"
                      }
                      if (key === "version") {
                        acc+=key+"="+version
                      } else {
                        acc+=key+"="+newParams[key]
                      }
                      return acc
                    }, "?")
                    topWin.location.href = topWin.document.location.href.split("?")[0] + params
                  }
                },
                bubbles: true,
                cancelable: true
              });
              topWin.dispatchEvent(event)
            }
          }
        ' style='padding: 0px; border: 0px; box-shadow: none;' target='_top'>
        <button class='px-4 py-2 bg-primary text-white rounded-full text-sm hover:bg-primary/90 transition-colors' data-selectorname='#id-18kqk' style>
        登录
    </button>
    </a>
    </div>
    </header>
<div class='flex flex-1 overflow-hidden'>
        <!-- 左侧导航栏 -->
<aside class='w-16 md:w-64 border-r border-gray-light flex flex-col bg-white'>
        <!-- 功能选项 -->
<div class='py-4 flex flex-col space-y-1'>
        <button class='nav-item-active flex items-center px-4 py-3 text-sm font-medium'>
        <i class='fas fa-comment-dots w-5 text-center'>
        </i>
<span class='ml-3 hidden md:inline-block'>
        ChatGLM
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm font-medium text-secondary hover:bg-gray-light/50 transition-colors'>
        <i class='fas fa-palette w-5 text-center'>
        </i>
<span class='ml-3 hidden md:inline-block'>
        AI画图
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm font-medium text-secondary hover:bg-gray-light/50 transition-colors'>
        <i class='fas fa-book-reader w-5 text-center'>
        </i>
<span class='ml-3 hidden md:inline-block'>
        AI阅读
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm font-medium text-secondary hover:bg-gray-light/50 transition-colors'>
        <i class='fas fa-file-alt w-5 text-center'>
        </i>
<span class='ml-3 hidden md:inline-block'>
        文档理解
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm font-medium text-secondary hover:bg-gray-light/50 transition-colors'>
        <i class='fas fa-microphone w-5 text-center'>
        </i>
<span class='ml-3 hidden md:inline-block'>
        语音对话
    </span>
    </button>
    </div>
<div class='border-t border-gray-light my-2 mx-4 hidden md:block'>
        </div>
<!-- 最近对话列表 -->
<div class='flex-1 overflow-y-auto scrollbar-hide py-2'>
        <div class='px-4 py-2 text-xs font-semibold text-secondary uppercase hidden md:block'>
        最近对话
    </div>
<button class='flex items-center px-4 py-3 text-sm hover:bg-gray-light/50 transition-colors w-full justify-start'>
        <i class='fas fa-history w-5 text-center text-secondary hidden md:block'>
        </i>
<span class='ml-3 truncate hidden md:inline-block'>
        如何提高学习效率
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm hover:bg-gray-light/50 transition-colors w-full justify-start'>
        <i class='fas fa-history w-5 text-center text-secondary hidden md:block'>
        </i>
<span class='ml-3 truncate hidden md:inline-block'>
        写一篇关于春天的散文
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm hover:bg-gray-light/50 transition-colors w-full justify-start'>
        <i class='fas fa-history w-5 text-center text-secondary hidden md:block'>
        </i>
<span class='ml-3 truncate hidden md:inline-block'>
        推荐几部科幻电影
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm hover:bg-gray-light/50 transition-colors w-full justify-start'>
        <i class='fas fa-history w-5 text-center text-secondary hidden md:block'>
        </i>
<span class='ml-3 truncate hidden md:inline-block'>
        解释量子计算基础概念
    </span>
    </button>
<button class='flex items-center px-4 py-3 text-sm hover:bg-gray-light/50 transition-colors w-full justify-start'>
        <i class='fas fa-history w-5 text-center text-secondary hidden md:block'>
        </i>
<span class='ml-3 truncate hidden md:inline-block'>
        帮我设计一个旅行计划
    </span>
    </button>
    </div>
<!-- 底部按钮 -->
<div class='p-4 border-t border-gray-light'>
        <button class='w-full flex items-center justify-center md:justify-start px-4 py-3 border border-dashed border-secondary/30 rounded-lg text-secondary hover:border-primary hover:text-primary transition-colors text-sm'>
        <i class='fas fa-plus'>
        </i>
<span class='ml-2 hidden md:inline-block'>
        新建对话
    </span>
    </button>
    </div>
    </aside>
<!-- 右侧主界面 -->
<main class='flex-1 flex flex-col bg-gray-50 overflow-hidden'>
        <!-- 版本信息 -->
<div class='bg-white border-b border-gray-light py-3 px-6 flex justify-between items-center'>
        <div class='flex items-center'>
        <span class='text-sm font-medium'>
        GLM-4.5
    </span>
<span class='mx-2 text-secondary'>
        |
    </span>
<span class='text-xs text-secondary'>
        已支持联网搜索
    </span>
    </div>
<div class='flex space-x-2'>
        <button class='p-2 rounded hover:bg-gray-light transition-colors text-secondary hover:text-primary'>
        <i class='fas fa-refresh'>
        </i>
    </button>
<button class='p-2 rounded hover:bg-gray-light transition-colors text-secondary hover:text-primary'>
        <i class='fas fa-ellipsis-v'>
        </i>
    </button>
    </div>
    </div>
<!-- 聊天区域 -->
<div class='flex-1 overflow-y-auto p-6 space-y-8' id='chat-container'>
        <!-- 欢迎消息 -->
<div class='max-w-3xl mx-auto'>
        <div class='text-center mb-8'>
        <h1 class='text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-4' data-yteditvalue='世界在提问时，SG3L已写好答案~'>
        世界在提问时，SG3L已写好答案~
    </h1>
<p class='text-secondary max-w-xl mx-auto' data-yteditvalue='嗨~~超开心遇见你！你最近有什么好玩的事情想和我分享吗？'>
        嗨~~超开心遇见你！你最近有什么好玩的事情想和我分享吗？
    </p>
    </div>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8'>
        <div class='p-4 bg-white rounded-xl shadow-sm border border-gray-light hover:shadow-md transition-shadow cursor-pointer'>
        <div class='flex items-start'>
        <div class='p-3 bg-primary-light rounded-lg text-primary'>
        <i class='fas fa-lightbulb'>
        </i>
    </div>
<div class='ml-3'>
        <h3 class='font-medium text-sm'>
        写一篇产品推广文案
    </h3>
<p class='text-xs text-secondary mt-1'>
        为新产品撰写吸引人的推广文案
    </p>
    </div>
    </div>
    </div>
<div class='p-4 bg-white rounded-xl shadow-sm border border-gray-light hover:shadow-md transition-shadow cursor-pointer'>
        <div class='flex items-start'>
        <div class='p-3 bg-primary-light rounded-lg text-primary'>
        <i class='fas fa-code'>
        </i>
    </div>
<div class='ml-3'>
        <h3 class='font-medium text-sm'>
        解释这段代码的功能
    </h3>
<p class='text-xs text-secondary mt-1'>
        分析并解释代码的工作原理
    </p>
    </div>
    </div>
    </div>
<div class='p-4 bg-white rounded-xl shadow-sm border border-gray-light hover:shadow-md transition-shadow cursor-pointer'>
        <div class='flex items-start'>
        <div class='p-3 bg-primary-light rounded-lg text-primary'>
        <i class='fas fa-plane'>
        </i>
    </div>
<div class='ml-3'>
        <h3 class='font-medium text-sm'>
        规划一周的旅行行程
    </h3>
<p class='text-xs text-secondary mt-1'>
        制定详细的旅行计划和建议
    </p>
    </div>
    </div>
    </div>
<div class='p-4 bg-white rounded-xl shadow-sm border border-gray-light hover:shadow-md transition-shadow cursor-pointer'>
        <div class='flex items-start'>
        <div class='p-3 bg-primary-light rounded-lg text-primary'>
        <i class='fas fa-question-circle'>
        </i>
    </div>
<div class='ml-3'>
        <h3 class='font-medium text-sm'>
        解答技术问题
    </h3>
<p class='text-xs text-secondary mt-1'>
        解释复杂的技术概念和问题
    </p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
<!-- 输入区域 -->
<div class='p-6 border-t border-gray-light bg-white'>
        <div class='max-w-3xl mx-auto'>
        <!-- 模式切换 -->
<div class='flex flex-wrap gap-2 mb-4'>
        <button class='px-3 py-1 text-xs rounded-full bg-primary text-white'>
        推理
    </button>
<button class='px-3 py-1 text-xs rounded-full bg-gray-light text-secondary hover:bg-gray-light/70 transition-colors'>
        联网
    </button>
<button class='px-3 py-1 text-xs rounded-full bg-gray-light text-secondary hover:bg-gray-light/70 transition-colors'>
        PPT模式
    </button>
<button class='px-3 py-1 text-xs rounded-full bg-gray-light text-secondary hover:bg-gray-light/70 transition-colors'>
        创意模式
    </button>
    </div>
<!-- 输入框 -->
<div class='relative'>
        <textarea class='w-full p-4 pr-16 pl-4 rounded-2xl border border-gray-light focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none min-h-[100px]' id='message-input' placeholder='和我聊聊吧'>
        </textarea>
<div class='absolute right-3 bottom-3 flex items-center space-x-2'>
        <button class='p-2 rounded-full hover:bg-gray-light transition-colors text-secondary hover:text-primary'>
        <i class='fas fa-paperclip'>
        </i>
    </button>
<button class='p-2 rounded-full hover:bg-gray-light transition-colors text-secondary hover:text-primary'>
        <i class='fas fa-microphone'>
        </i>
    </button>
<button class='p-2 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors' id='send-button'>
        <i class='fas fa-paper-plane'>
        </i>
    </button>
    </div>
    </div>
<div class='text-center text-xs text-secondary mt-3'>
        <p style='left:-5px;position:relative' data-yteditvalue='我们会保护你的隐私，聊天内容仅你可见'>
        我们会保护你的隐私，聊天内容仅你可见
    </p>
    </div>
    </div>
    </div>
    </main>
    </div>
<script >// 页面加载时初始化渲染
document.addEventListener('DOMContentLoaded', function () {
  // 获取DOM元素
  var chatContainer = document.getElementById('chat-container');
  var messageInput = document.getElementById('message-input');
  var sendButton = document.getElementById('send-button');

  // 发送消息函数
  function sendMessage() {
    var message = messageInput.value.trim();
    if (!message) return;

    // 添加用户消息到聊天容器
    addMessageToChat(message, 'user');

    // 清空输入框
    messageInput.value = '';

    // 自动滚动到底部
    scrollToBottom();

    // 模拟AI回复
    setTimeout(function () {
      var aiResponse = "感谢你的分享！听起来你最近过得很充实。我很喜欢和你聊天，如果你有任何问题或需要帮助，随时都可以告诉我哦！";
      addMessageToChat(aiResponse, 'ai');
      scrollToBottom();
    }, 1000);
  }

  // 添加消息到聊天容器
  function addMessageToChat(text, sender) {
    var messageDiv = document.createElement('div');
    messageDiv.className = "flex ".concat(sender === 'user' ? 'justify-end' : 'justify-start');
    var bubbleDiv = document.createElement('div');
    bubbleDiv.className = "max-w-[80%] ".concat(sender === 'user' ? 'items-end' : 'items-start', " flex");

    // 添加头像
    if (sender === 'ai') {
      bubbleDiv.innerHTML += "\n                        <img src=\"./api/searchImage?query=AI assistant avatar with friendly appearance, blue and white color scheme, vector style&width=40&height=40\" \n                             alt=\"\u6E05\u8A00AI\" class=\"w-10 h-10 rounded-full mr-3\">\n                    ";
    }

    // 添加消息内容
    bubbleDiv.innerHTML += "\n                    <div class=\"".concat(sender === 'user' ? 'chat-bubble-user' : 'chat-bubble-ai', " p-4\">\n                        <p>").concat(text, "</p>\n                    </div>\n                ");
    messageDiv.appendChild(bubbleDiv);
    chatContainer.appendChild(messageDiv);
  }

  // 滚动到底部
  function scrollToBottom() {
    chatContainer.scrollTop = chatContainer.scrollHeight;
  }

  // 绑定事件
  sendButton.addEventListener('click', sendMessage);
  messageInput.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  });

  // 功能选项切换
  var navItems = document.querySelectorAll('aside button:not(:last-child)');
  navItems.forEach(function (item) {
    item.addEventListener('click', function () {
      // 移除所有选中状态
      navItems.forEach(function (navItem) {
        navItem.classList.remove('nav-item-active');
        navItem.classList.add('text-secondary', 'hover:bg-gray-light/50');
      });

      // 添加当前选中状态
      item.classList.add('nav-item-active');
      item.classList.remove('text-secondary', 'hover:bg-gray-light/50');
    });
  });

  // 模式切换按钮
  var modeButtons = document.querySelectorAll('.flex.space-x-2 button');
  modeButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      // 移除所有选中状态
      modeButtons.forEach(function (modeBtn) {
        modeBtn.classList.remove('bg-primary', 'text-white');
        modeBtn.classList.add('bg-gray-light', 'text-secondary', 'hover:bg-gray-light/70');
      });

      // 添加当前选中状态
      button.classList.add('bg-primary', 'text-white');
      button.classList.remove('bg-gray-light', 'text-secondary', 'hover:bg-gray-light/70');
    });
  });
});</script>
    </body>
    </html>